<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<script>
    function ctrl($scope) {
        $scope.text = "Text";
    }
</script>
<style type="text/css">
    div.content {
        line-height: 175%;
        color: rgb(74, 74, 74);
    }

    div.words a {
        text-decoration: none;
        color: rgb(20,84,183);
        line-height: 200%;
    }

    div.words a:hover {
        text-decoration: underline;
    }

    div.content span.new-word {
        background-color: yellow;
    }

    h1.headline {
        font-family: Georgia,serif;
        font-size: 2rem;
        font-weight: normal;
        line-height: 100%;
    }

    div.content p {
        margin-bottom: 15px;
    }

    div.content br {
        margin-bottom: 15px;
    }
</style>
<div class="table" style="margin-top: 30px">
    <div class="cell words" style="width:180px; padding-left: 20px">
        <c:forEach items="${article.words}" var="w">
            <p><a href="/dict/${w.key}">${w.value}</a>
        </c:forEach>
    </div>
    <div class="cell content" style="padding-right: 60px; 
                                     padding-bottom:20px;">
        <h1 class="headline">${article.title}</h1> 
        <h2 class="headline">${article.summary}</h2> 
        <p />
        <div >${article.content}</div>
    </div>
</div>